<template>
    <div class="advantage">
        <div class="w1200">
            <div class="title">专业的驾培行业解决方案</div>
            <div class="productType">
                <div v-for="(value, index) in productTypeList" :key="index"
                    class="flex flex-column flex-justify-center flex-align-center">
                    <div class="typeimg">
                        <img :src="value.img" :alt="value.desc">
                    </div>
                    <div class="type-desc">{{ value.desc }}</div>
                </div>
            </div>
            <div class="advantage-detail">
                <div class="advantage-item">
                    <div class="advantage-item-img">
                        <img src="https://image.lutongjiakao.com/system/0c154f664cde498790112df48f799607.png" alt="">
                    </div>
                    <div class="advantage-item-content">
                        <div class="advantage-item-title">
                            多渠道曝光，<span>打造驾校品牌</span>
                        </div>
                        <div class="advantage-item-desc">
                            全渠道多终端覆盖
                        </div>
                        <div class="advantage-item-remark">
                            公众号+小程序+H5等多端全覆盖，支持扫码一键授权使用，快速搭建你的驾校平台
                        </div>
                        <div class="advantage-item-desc">
                            学员PC端
                        </div>
                        <div class="advantage-item-remark">
                            支持Windows7以上系统，不限制终端安装台数
                        </div>
                        <div class="advantage-item-desc">
                            多端联动 一站信息互通
                        </div>
                        <div class="advantage-item-remark">
                            多端刷题数据互通，提供微信预约练车、官方理论模拟刷题平台
                        </div>
                    </div>
                </div>
                <div class="advantage-item">
                    <div class="advantage-item-content">
                        <div class="advantage-item-title">
                            多款业务应用，<span>全方位覆盖驾校营销场景</span>
                        </div>
                        <div class="advantage-item-desc">
                            高效引流变现
                        </div>
                        <div class="advantage-item-remark">
                            打破传统驾校束缚，通过完善学员推广机制、秒杀等模式，打通线上线下营销场景，实现高效拉新
                        </div>
                        <div class="advantage-item-desc">
                            线上引流获客
                        </div>
                        <div class="advantage-item-remark">
                            抵用券、体验课限时体验，精准客户自动化获取
                        </div>
                        <div class="advantage-item-desc">
                            精准客群运营
                        </div>
                        <div class="advantage-item-remark">
                            付费会员卡，提升会员粘性，提前锁定消费，回笼资金
                        </div>
                    </div>
                    <div class="advantage-item-img">
                        <img src="https://image.lutongjiakao.com/system/84cdbf0561504785a7dd80c4b666b508.png" alt="">
                    </div>
                </div>
                <div class="advantage-item">
                    <div class="advantage-item-img">
                        <img src="https://image.lutongjiakao.com/system/52ec43f456fc405c84c55f42864ed562.png" alt="">
                    </div>
                    <div class="advantage-item-content">
                        <div class="advantage-item-title">
                            <!-- 动态算力-云桌面<span>高效灵活</span> -->
                            数字化运营管理，<span>全方位提升驾校运营效率</span>
                        </div>
                        <div class="advantage-item-desc">
                            学员管理
                        </div>
                        <div class="advantage-item-remark">
                            30秒快速完成报名建档，自动关联学员缴费、培训、成绩、学时信息
                        </div>
                        <div class="advantage-item-desc">
                            运营分析
                        </div>
                        <div class="advantage-item-remark">
                            日常经营数据随时掌握，招生数据直观清晰，招生数据直观清晰
                        </div>
                        <div class="advantage-item-desc">
                            驾校管理
                        </div>
                        <div class="advantage-item-remark">
                            深度整合学员管理、车辆调度、财务管控于一体；12年行业服务经验，我们懂您真正的需求
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const productTypeList = ref([
    {
        img: 'https://image.lutongjiakao.com/system/b271cc56212749fe96e70d4a5067fc44.png',
        desc: '适配多种驾校经营模式'
    },
    {
        img: 'https://image.lutongjiakao.com/system/68d3bcdeccdd4f5cba64fa19a6b1628b.png',
        desc: '打通全渠道经营 助力品牌升级'
    },
    {
        img: 'https://image.lutongjiakao.com/system/3a55afaab62a44e68b81bb5297cffeb7.png',
        desc: '私域营销 搭建私域增长闭环'
    },
    {
        img: 'https://image.lutongjiakao.com/system/3a55afaab62a44e68b81bb5297cffeb7.png',
        desc: '数据化运营 全链路数据分析'
    }
])
</script>
<style lang="scss" scoped>
@use 'sass:math';

@function rem($px) {
    @return math.div($px, 16) * 1rem;
}

.w1200 {
    width: rem(900);
    margin: 0 auto;
}

.advantage {
    padding: rem(60) 0;
}

.title {
    font-size: rem(36);
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
    margin-bottom: rem(40);
}

.productType {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: rem(70);
}

.typeimg {
    width: rem(90);
    height: rem(90);

    img {
        width: 100%;
        height: 100%;
    }
}

.type-desc {
    font-size: rem(14);
    margin-top: rem(20);
}

.advantage-detail {
    .advantage-item:first-child {
        margin-top: 0;
    }
}

.advantage-item {
    display: flex;
    gap: rem(100);
    margin-top: rem(100);
}

.advantage-item-img {
    width: rem(434);
    height: rem(300);

    img {
        width: 100%;
        height: 100%;
    }
}

.advantage-item-content {
    width: calc(rem(900) - rem(434) - rem(100));
}

.advantage-item-title {
    font-size: rem(30);
    color: #000;
    font-weight: 700;

    span {
        color: rgb(10, 188, 84);
    }
}

.advantage-item-desc {
    margin: rem(20) 0 rem(10);
    font-size: rem(14);
    color: #000;
    font-weight: bold;
}

.advantage-item-remark {
    font-size: rem(14);
    color: rgb(102, 102, 102);
}
</style>
